<template>
  <el-carousel-item :key="keyNumber" :autoplay="autoplay">
    <div
      id="card"
      :style="{
        width: '100%',
        height: '100%',
        backgroundImage: `url(${backgroundImage})`,
        backgroundRepeat: 'none',
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      }"
    ></div>
  </el-carousel-item>
</template>

<script>
export default {
  name: "CarouselItem",
  props: {
    keyNumber: {
      type: Number,
      required: true,
    },
    backgroundImage: {
      type: String,
      required: true,
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
